<template>
  <div class="employees">
    <el-card class="btn">
      <el-button type="primary">导入</el-button>
      <el-button type="primary" @click="addEvent">+新增员工</el-button>
    </el-card>
    <el-card class="cont">
      <el-table :data="list" style="width: 100%;">
        <el-table-column label="序号" width="80">
          <template v-slot="{ $index }">
            <div>
              {{ (page.page - 1) * page.size + $index + 1 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="username"
          sortable
        ></el-table-column>
        <el-table-column
          label="手机号"
          prop="mobile"
          sortable
        ></el-table-column>
        <el-table-column
          label="工号"
          prop="workNumber"
          sortable
        ></el-table-column>
        <el-table-column
          label="聘用形式"
          prop="formOfEmployment"
          sortable
        ></el-table-column>
        <el-table-column
          label="部门"
          prop="departmentName"
          sortable
        ></el-table-column>
        <el-table-column
          label="入职时间"
          prop="timeOfEntry"
          sortable
        ></el-table-column>
        <el-table-column
          label="状态"
          prop="enableState"
          sortable
        ></el-table-column>
        <el-table-column label="操作" fixed="right" width="250">
          <template>
            <el-button type="text">查看</el-button>
            <el-button type="text">转正</el-button>
            <el-button type="text">调岗</el-button>
            <el-button type="text">离职</el-button>
            <el-button type="text">角色</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          layout="total,sizes,prev,next,pager,jumper"
          :total="page.total"
          :pagesizes="[1, 5, 10, 100, 200, 300]"
          :page-size="page.size" 
          :current-page="page.page"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <Add ref="add" @getData="getData" />
  </div>
</template>

<script>
import { sysUser } from '@/api/employees.js'
import employees from '@/api/constant/employees.js'
import Add from './components/Add.vue'
import moment from 'moment'
export default {
  components: {
    Add
  },
  data () {
    return {
      list: [{}],
      page: {
        total: 100,
        size: 5, // 每页显示
        page: 1 // 默认页码数
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await sysUser(this.page)
      res.data.rows.forEach(item => {
        const res = employees.hireType.find(item2 => {
          return item2.id === +item.formOfEmployment
        })
        const resultStr = res ? res.value : '-'
        item.formOfEmployment = resultStr
        item.timeOfEntry = moment(item.timeOfEntry).format('YYYY-MM-DD')
      })
      this.list = res.data.rows
      this.page.total = res.data.total
      console.log(res)
    },
    sizeChange (size) {
      this.page.size = size
      this.page.page = 1
      this.getData()
    },
    pageChange (page) {
      this.page.page = page
      this.getData()
    },
    addEvent () {
      this.$refs.add.isShow = true
    },
  }
}
</script>

<style lang="scss" scoped>
.employees {
  .btn {
    margin: 10px 10px;
    text-align: right;
  }
  .cont {
    margin: 0 10px;
  }
}
</style>
